import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:get/get.dart';
import '../../../../components/log_utils.dart';
import '../../../devices/device_tab/device_detail/new_air_cooling_page/temperature_full_chart/component/full_screen_back.dart';
import 'full_screen_power_line_chart_controller.dart';

class FullScreenPowerLineChartPage
    extends GetView<FullScreenPowerLineChartController> {
  const FullScreenPowerLineChartPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetBuilder<FullScreenPowerLineChartController>(
        builder: (_) => Scaffold(
            backgroundColor: Colors.white,
            body: SafeArea(
                child: RotatedBox(
              quarterTurns: 1,
              child: Scaffold(
                backgroundColor: Colors.white,
                body: Column(
                  children: [
                    // Gaps.vGap10,
                    FullScreenBack(() {
                      Log.d('back');
                      Get.back();
                    }),
                    Expanded(
                      child: Container(
                        color: Colors.white,
                        padding: const EdgeInsets.only(left: 0, right: 0),
                        child: Echarts(
                          captureAllGestures: false,
                          option: '''
 {
  color: ['#3DD598', '#007DFF'],
 /// 纵轴
  yAxis: [
    {
      type: 'value',
               max:function (value) {
             return (typeof value.max === 'number' && isNaN(value.max))?1:null;
        },
       min:function (value) {
             return (typeof value.min === 'number' && isNaN(value.min))?0:null;
        },
      name: ${jsonEncode('kW')},
      nameTextStyle: {
        align: "center"
      },
      offset: 0,
      /// 坐标轴在 grid 区域中的横向分隔线
      splitLine: {
        show: true,
        lineStyle: {
          type: [10, 5],
          dashOffset: 5,
          color: 'rgba(0,0,0,0.09)',
          width: 1
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 11,
      },
    }
  ],
     /// 横轴
  xAxis: {
    type: 'category',   
    data: ${jsonEncode(controller.timeList)},               
    axisLine:{
      show: false,
    }, 
    splitNumber: 30,
    minInterval: 30,
    interval:true,
    axisTick: {
      show: false
    }, 
    axisLabel: {
      color: '#999999',
      fontSize: 11,
      // interval: function (index) { // 自定义间隔函数 
      //     if (index % 1 === 0) { // 每四小时显示一次  // 返回值是五分钟为一个间隔
      //         return true;
      //     } else {
      //         return false;
      //     }
      // },
    },
  },
  dataZoom: [
    {
      type: 'inside',
      realtime: false,
    },
    {
      start: 0,
      end: 0,
      height: 10,
      bottom:55,
       left:20,
       right:20,
      realtime: false,
    },
  ],
  /// 坐标轴
  grid: {
    top: 30,
    bottom: 75,
    right: 40,
    containLabel: true,
    left:30,
  },
  legend: {
    show: true,
    icon: 'rect',
    //     left:20,
    // right:20,
    bottom:5,
        itemHeight: 3,
    itemWidth: 12,
     textStyle: {
      borderRadius: [2, 2, 2, 2]
    },
    
  },
  
  ///提示框
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,0.85)',
    borderWidth: 0,
    opacity: 0.2,
    confine: true,
    padding: [
      10, // 上
      8, // 右
      10, // 下
      8 // 左
    ],
    textStyle: {
      color: 'white'
    },
        axisPointer: {
      /// 坐标轴指示器配置项
      lineStyle: {
        color: 'rgba(0,0,0,0.09)',
        position: function (pt) {
          return [pt[0], 500];
        }
      }
    },
    formatter:${controller.formatter}
  },
    /// 图表数据
  series: ${jsonEncode(controller.data)},
  
}
  ''',
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ))));
  }
}
